<template>
    <!-- 筛选区 -->
    <div class="sub-filter" v-if="filterData && !filterLoading">
        <div class="item">
            <div class="head">品牌：</div>
            <div class="body">
                <a href="javascript:;" :class="{active:filterData.selectBrand === brand.id}" v-for="brand in filterData.brands" :key="brand.id">{{ brand.name }}</a>
            </div>
        </div>
        <div class="item" v-for="p in filterData.saleProperties" :key="p.id">
            <div class="head">{{ p.name }}:</div>
            <div class="body">
                <a href="javascript:;" :class="{active:p.selectProp === attr.id}" v-for="attr in p.properties" :key="attr.id">{{ attr.name }}</a>
            </div>        
        </div>
    </div>
    <div class="sub-filter" v-else>
        <XtxSkeleton class="item" width="800px" height="40px"/>
        <XtxSkeleton class="item" width="800px" height="40px"/>
        <XtxSkeleton class="item" width="600px" height="40px"/>
        <XtxSkeleton class="item" width="600px" height="40px"/>
        <XtxSkeleton class="item" width="600px" height="40px"/>
    </div>
</template>
<script>
import { findSubCategoryFilter } from '@/api/category';
import { useRoute } from 'vue-router';
import {ref, watch} from 'vue'
export default {
    name: 'SubFilter',
    setup({emit}){
        const route = useRoute()
        const filterData = ref(null)
        const filterLoading = ref(false)

        watch(()=>route.params.id, (newVal)=>{
            if(newVal && route.path ===('/category/sub'+newVal)) {
                filterLoading.value = true
                newVal && findSubCategoryFilter(route.params.id).then(({result})=>{
                    // 品牌全部
                    result.selectBrand = null
                    result.brands.unshift({id:null, name:'全部'})
                    // 销售属性全部
                    result.saleProperties.forEach(p=>{
                        p.selectProp = undefined
                        p.properties.unshift({id:null, name:'全部'})
                    })
                    filterData.value = result
                    filterLoading.value = false
                })
            }
        },{immediate:true})

        // 获取筛选参数
        const getFilterParams = () => {
            const filterParams = {}
            const attrs = []

            filterParams.brandId = filterData.value.selectBrand

            filterData.value.saleProperties.forEach(p=>{
                const attr = p.properties.find(attr=>attr.id === p.selectProp)
                if(attr&&attr.id !== undefined) {
                    attrs.push({
                        groupName:p.name,
                        propertyName:attr.name,
                    })
                }
            })
            if(attrs.length) filterParams.attrs = attrs
            return filterParams
        }

        // 选择品牌
        const changeBrand = (brandId) => {
            if(filterData.value.selectBrand === brandId) return
            filterData.value.selectBrand = brandId
            emit('filter-change', getFilterParams())
        }

        // 选中属性
        const changeAttr = (p, attrId) => {
            if(p.selectProp === attrId) return
            p.selectProp = attrId
            emit('filter-change', getFilterParams())
        }

        return {
            filterData,
            filterLoading,
            changeAttr,
            changeBrand,
        }
    }
}
</script>
<style scoped lang='less'>
.sub-filter {
    background: #fff;
    padding: 25px;

    .xtx-skeleton {
        padding: 10px 0;
    }

    .item {
        display: flex;
        line-height: 40px;

        .head {
            width: 80px;
            color: #999;
        }

        .body {
            flex: 1;

            a {
                margin-right: 36px;
                transition: all .3s;
                display: inline-block;

                &.active,
                &:hover {
                    color: @xtxColor;
                }
            }
        }
    }
}</style>